import React, { Fragment, useEffect, useMemo, useRef, useState } from "react";
import Image from "next/image";

import styles from "./home.module.scss";

import { IconButton } from "./button";
import SettingsIcon from "../icons/settings.svg";
import AddIcon from "../icons/add.svg";
import DeleteIcon from "../icons/delete.svg";
import MaskIcon from "../icons/mask.svg";
import McpIcon from "../icons/mcp.svg";
import DragIcon from "../icons/drag.svg";
import DiscoveryIcon from "../icons/discovery.svg";
import SideLogoIcon from "../icons/side-logo.png";

import Locale from "../locales";

import { useAppConfig, useChatStore } from "../store";

import {
  DEFAULT_SIDEBAR_WIDTH,
  MAX_SIDEBAR_WIDTH,
  MIN_SIDEBAR_WIDTH,
  NARROW_SIDEBAR_WIDTH,
  Path,
} from "../constant";

import { Link, useNavigate } from "react-router-dom";
import { isIOS, useMobileScreen } from "../utils";
import dynamic from "next/dynamic";
import { Selector, showConfirm } from "./ui-lib";
import clsx from "clsx";
import { isMcpEnabled } from "../mcp/actions";

const DISCOVERY = [
  { name: Locale.Plugin.Name, path: Path.Plugins },
  { name: "Stable Diffusion", path: Path.Sd },
  { name: Locale.SearchChat.Page.Title, path: Path.SearchChat },
];

const ChatList = dynamic(async () => (await import("./chat-list")).ChatList, {
  loading: () => null,
});

export function useHotKey() {
  const chatStore = useChatStore();

  useEffect(() => {
    const onKeyDown = (e: KeyboardEvent) => {
      if (e.altKey || e.ctrlKey) {
        if (e.key === "ArrowUp") {
          chatStore.nextSession(-1);
        } else if (e.key === "ArrowDown") {
          chatStore.nextSession(1);
        }
      }
    };

    window.addEventListener("keydown", onKeyDown);
    return () => window.removeEventListener("keydown", onKeyDown);
  });
}

export function useDragSideBar() {
  const limit = (x: number) => Math.min(MAX_SIDEBAR_WIDTH, x);

  const config = useAppConfig();
  const startX = useRef(0);
  const startDragWidth = useRef(config.sidebarWidth ?? DEFAULT_SIDEBAR_WIDTH);
  const lastUpdateTime = useRef(Date.now());

  const toggleSideBar = () => {
    config.update((config) => {
      if (config.sidebarWidth < MIN_SIDEBAR_WIDTH) {
        config.sidebarWidth = DEFAULT_SIDEBAR_WIDTH;
      } else {
        config.sidebarWidth = NARROW_SIDEBAR_WIDTH;
      }
    });
  };

  const onDragStart = (e: MouseEvent) => {
    // 屏蔽拖动功能，只保留点击切换功能
    e.preventDefault();

    const dragStartTime = Date.now();

    const handleDragEnd = () => {
      window.removeEventListener("pointerup", handleDragEnd);

      // 只处理点击事件（短时间内的按下和抬起）
      const shouldFireClick = Date.now() - dragStartTime < 300;
      if (shouldFireClick) {
        toggleSideBar();
      }
    };

    // 只监听pointerup事件，不监听pointermove事件
    window.addEventListener("pointerup", handleDragEnd);
  };

  const isMobileScreen = useMobileScreen();
  const shouldNarrow =
    !isMobileScreen && config.sidebarWidth < MIN_SIDEBAR_WIDTH;

  useEffect(() => {
    const barWidth = shouldNarrow
      ? NARROW_SIDEBAR_WIDTH
      : limit(config.sidebarWidth ?? DEFAULT_SIDEBAR_WIDTH);
    const sideBarWidth = isMobileScreen ? "100vw" : `${barWidth}px`;
    document.documentElement.style.setProperty("--sidebar-width", sideBarWidth);
  }, [config.sidebarWidth, isMobileScreen, shouldNarrow]);

  return {
    onDragStart,
    shouldNarrow,
  };
}

export function SideBarContainer(props: {
  children: React.ReactNode;
  onDragStart: (e: MouseEvent) => void;
  shouldNarrow: boolean;
  className?: string;
}) {
  const isMobileScreen = useMobileScreen();
  const isIOSMobile = useMemo(
    () => isIOS() && isMobileScreen,
    [isMobileScreen],
  );
  const { children, className, onDragStart, shouldNarrow } = props;
  return (
    <div
      className={clsx(styles.sidebar, className, {
        [styles["narrow-sidebar"]]: shouldNarrow,
      })}
      style={{
        // #3016 disable transition on ios mobile screen
        transition: isMobileScreen && isIOSMobile ? "none" : undefined,
      }}
    >
      {children}
      <div
        className={styles["sidebar-drag"]}
        onPointerDown={(e) => onDragStart(e as any)}
      >
        <DragIcon />
      </div>
    </div>
  );
}

export function SideBarHeader(props: {
  title?: string | React.ReactNode;
  subTitle?: string | React.ReactNode;
  logo?: React.ReactNode;
  children?: React.ReactNode;
  shouldNarrow?: boolean;
}) {
  const { title, subTitle, logo, children, shouldNarrow } = props;
  return (
    <Fragment>
      <div
        className={clsx(styles["sidebar-header"], {
          [styles["sidebar-header-narrow"]]: shouldNarrow,
        })}
        data-tauri-drag-region
      >
        <div className={styles["sidebar-title-container"]}>
          <div className={styles["sidebar-title"]} data-tauri-drag-region>
            {title}
          </div>
          <div className={styles["sidebar-sub-title"]}>{subTitle}</div>
        </div>
        {/* 屏蔽的这个使用svg图片 */}
        {/* <div className={clsx(styles["sidebar-logo"], "no-dark")}>{logo}</div> */}
        <div
          className={clsx(styles["sidebar-logo"], {
            [styles["sidebar-logo-narrow"]]: shouldNarrow,
          })}
        >
          {logo}
        </div>
      </div>
      {children}
    </Fragment>
  );
}

export function SideBarBody(props: {
  children: React.ReactNode;
  onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
}) {
  const { onClick, children } = props;
  return (
    <div className={styles["sidebar-body"]} onClick={onClick}>
      {children}
    </div>
  );
}

export function SideBarTail(props: {
  primaryAction?: React.ReactNode;
  secondaryAction?: React.ReactNode;
}) {
  const { primaryAction, secondaryAction } = props;

  return (
    <div className={styles["sidebar-tail"]}>
      <div className={styles["sidebar-actions"]}>{primaryAction}</div>
      {/* toclose 手动关闭 */}
      {false && (
        <div className={styles["sidebar-actions"]}>{secondaryAction}</div>
      )}
    </div>
  );
}

export function SideBar(props: { className?: string }) {
  useHotKey();
  const { onDragStart, shouldNarrow } = useDragSideBar();
  const [showDiscoverySelector, setshowDiscoverySelector] = useState(false);
  const navigate = useNavigate();
  const config = useAppConfig();
  const chatStore = useChatStore();
  const [mcpEnabled, setMcpEnabled] = useState(false);

  useEffect(() => {
    // 检查 MCP 是否启用
    const checkMcpStatus = async () => {
      const enabled = await isMcpEnabled();
      setMcpEnabled(enabled);
    };
    checkMcpStatus();
  }, []);

  return (
    <SideBarContainer
      onDragStart={onDragStart}
      shouldNarrow={shouldNarrow}
      {...props}
    >
      <SideBarHeader
        title="陕西智慧平台"
        subTitle="陕西电力专属大模型"
        logo={
          <Image
            src={SideLogoIcon}
            alt="陕西智慧平台 Logo"
            width={shouldNarrow ? 48 : 110}
            priority
          />
        }
        shouldNarrow={shouldNarrow}
      >
        <div className={styles["sidebar-header-bar"]}>
          {
            // toclose:关闭显示，这个是选择面具模型
            false && (
              <IconButton
                icon={<MaskIcon />}
                text={shouldNarrow ? undefined : Locale.Mask.Name}
                className={styles["sidebar-bar-button"]}
                onClick={() => {
                  navigate(Path.NewChat, { state: { fromHome: true } });
                }}
                shadow
              />
            )
          }
          {mcpEnabled && (
            <IconButton
              icon={<McpIcon />}
              text={shouldNarrow ? undefined : Locale.Mcp.Name}
              className={styles["sidebar-bar-button"]}
              onClick={() => {
                navigate(Path.McpMarket, { state: { fromHome: true } });
              }}
              shadow
            />
          )}
          {
            // toclose:关闭显示，这是弹窗
            false && (
              <IconButton
                icon={<DiscoveryIcon />}
                text={shouldNarrow ? undefined : Locale.Discovery.Name}
                className={styles["sidebar-bar-button"]}
                onClick={() => setshowDiscoverySelector(true)}
                shadow
              />
            )
          }
          <IconButton
            icon={<DiscoveryIcon />}
            text={shouldNarrow ? undefined : "新对话"}
            className={styles["sidebar-bar-button"]}
            onClick={() => {
              navigate(Path.NewChatStart);
            }}
            shadow
          />
          <IconButton
            icon={<DiscoveryIcon />}
            text={shouldNarrow ? undefined : "大前期计划"}
            className={styles["sidebar-bar-button"]}
            onClick={() => {
              navigate(Path.PrePlan);
            }}
            shadow
          />
          <IconButton
            icon={<DiscoveryIcon />}
            text={shouldNarrow ? undefined : "地图"}
            className={styles["sidebar-bar-button"]}
            onClick={() => navigate(Path.Map)}
            shadow
          />
          <IconButton
            icon={<DiscoveryIcon />}
            text={shouldNarrow ? undefined : "知识库"}
            className={styles["sidebar-bar-button"]}
            onClick={() => setshowDiscoverySelector(true)}
            shadow
          />
          <IconButton
            icon={<DiscoveryIcon />}
            text={shouldNarrow ? undefined : "历史对话"}
            className={styles["sidebar-bar-button"]}
            onClick={() => setshowDiscoverySelector(true)}
            shadow
          />
        </div>
        {showDiscoverySelector && (
          <Selector
            items={[
              ...DISCOVERY.map((item) => {
                return {
                  title: item.name,
                  value: item.path,
                };
              }),
            ]}
            onClose={() => setshowDiscoverySelector(false)}
            onSelection={(s) => {
              navigate(s[0], { state: { fromHome: true } });
            }}
          />
        )}
      </SideBarHeader>
      <SideBarBody
        onClick={(e) => {
          if (e.target === e.currentTarget) {
            navigate(Path.Home);
          }
        }}
      >
        <ChatList narrow={shouldNarrow} />
      </SideBarBody>
      <SideBarTail
        primaryAction={
          <>
            {/* {
              // toclose 手动关闭
              false && (
                <>
                  <div className={clsx(styles["sidebar-action"], styles.mobile)}>
                    <IconButton
                      icon={<DeleteIcon />}
                      onClick={async () => {
                        if (await showConfirm(Locale.Home.DeleteChat)) {
                          chatStore.deleteSession(chatStore.currentSessionIndex);
                        }
                      }}
                    />
                  </div>
                  <div className={styles["sidebar-action"]}>
                    <Link to={Path.Settings}>
                      <IconButton
                        aria={Locale.Settings.Title}
                        icon={<SettingsIcon />}
                        shadow
                      />
                    </Link>
                  </div>
                </>
              )
            } */}
            <IconButton
              icon={<SettingsIcon />}
              aria={Locale.Settings.Title}
              text={shouldNarrow ? undefined : "系统设置"}
              onClick={() => navigate(Path.Settings)}
              className={styles["sidebar-action-settings"]}
              shadow
            />
            {/* toclose 手动关闭 */}
            {/* <div className={styles["sidebar-action"]}>
              <a href={REPO_URL} target="_blank" rel="noopener noreferrer">
                <IconButton
                  aria={Locale.Export.MessageFromChatGPT}
                  icon={<GithubIcon />}
                  shadow
                />
              </a>
            </div> */}
          </>
        }
        secondaryAction={
          <Fragment>
            {false && (
              <IconButton
                icon={<AddIcon />}
                text={shouldNarrow ? undefined : Locale.Home.NewChat}
                onClick={() => {
                  if (config.dontShowMaskSplashScreen) {
                    chatStore.newSession();
                    navigate(Path.Chat);
                  } else {
                    navigate(Path.NewChat);
                  }
                }}
                shadow
              />
            )}
          </Fragment>
        }
      />
    </SideBarContainer>
  );
}
